<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<body>
        <div class="container" th:fragment="index(status)" th:if="${status} eq 4">


            <!-- begin::page-header -->
            <div class="page-header">
                <h4>访客信息</h4>
            </div>
            <!-- end::page-header -->

            <div class="row">
                <div class="col-md-12">

                    <div class="card">
                        <div class="card-body">
                            <li style="display: inline-block; float: left;position: relative; top: 15px;" class="list-inline-item mb-0">
                                <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                    Order by
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">

                                    <a class="dropdown-item" href="/vstime">访问时间</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/onlie">在线</a>
                                    <div class="dropdown-divider"></div>

                                </div>
                            </li>

                            <label style="display: inline-block;margin-bottom: .5rem;float: right;position: relative;top: 15px" >
                                <a  id="vDownload" methods="get" href="/vsdownload" type="button" class="sweet-success btn btn-outline-primary">导出数据</a>
                            </label>
                            <table id="example1" class=" table table-striped table-bordered">
                                <thead>
                                <tr >
                                    <th>访客姓名</th>
                                    <th>ip地址</th>
                                    <th>终端</th>
                                    <th>设备</th>
                                    <th>访问时间</th>
                                    <th>访问状态</th>
                                    <th>操作</th></tr>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="vstor:${vlists}">
                                    <td tabindex="0" class="sorting_1">[[${vstor.visitorname}]]</td>
                                    <td>[[${vstor.ip}]]</td>
                                    <td>[[${vstor.terminal}]]</td>
                                    <td>[[${vstor.device}]]</td>
                                    <td th:text="${#dates.format(vstor.visittime, 'yyyy-MM-dd HH:mm')}" pattern="yyyy-MM-dd HH:mm:ss">[[]]</td>
                                    <td th:text="${vstor.state}" th:class="(${vstor.state} eq '在线') ? 'green':'black'"></td>
                                    <td><a  style="color: #0ea5eb" th:href="@{/vschats(ip=${vstor.ip})}">发起会话</a></td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
            </div>

        </div>
        </div>
    </main>
    <!-- end::main-content -->

    <!-- begin::footer -->
    <footer>
        <div class="container">
            <div>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
            <div>
                <nav class="nav">
                    <a href="http://www.datouwang.com/jiaoben/" class="nav-link">Licenses</a>
                    <a href="#" class="nav-link">Change Log</a>
                    <a href="#" class="nav-link">Get Help</a>
                </nav>
            </div>
        </div>
    </footer>
    <!-- end::footer -->

</div>
<!-- end::main -->

<!-- Plugin scripts -->
<script src="vendors/bundle.js"></script>

<!-- DataTable -->
<script src="vendors/dataTable/jquery.dataTables.min.js"></script>
<script src="vendors/dataTable/dataTables.bootstrap4.min.js"></script>
<script src="vendors/dataTable/dataTables.responsive.min.js"></script>
<script src="assets/js/examples/datatable.js"></script>

<!-- Prism -->
<script src="vendors/prism/prism.js"></script>

<!-- App scripts -->
<script src="assets/js/app.min.js"></script>
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>

<script>
    $(function () {
        $('#vDownload').click(function () {
            toastr.options = {
                timeOut: 3000,
                progressBar: true,
                showMethod: "slideDown",
                hideMethod: "slideUp",
                showDuration: 200,
                hideDuration: 200
            };
            toastr.success('下载成功');
        })
    })
</script>
</body>
</html>